<template>
	<view>
		<!-- <view style="height: 10px;"></view> -->
		<!-- 内容 -->
		<view class="content_box">
			<!-- 一级 -->
			<view class="box_left">
				<scroll-view class="scroll_left" scroll-y :style="{height: scrollHeight + 'px'}">
					<view v-for="(item,index) in leftList" :key="index" class="left_item"
						:class="{left_active : leftSelect == index}" @click="changeLeft(index)">{{item.name}}</view>
				</scroll-view>
			</view>
			<!-- 二级 -->
			<view class="box_right" :style="{height: scrollHeight - 4 + 'px'}">
				<scroll-view class="scroll_right" scroll-y :style="{height: scrollHeight - 4 + 'px'}">
					<view class="flex flex-wrap pl-3 pt-3">
						<view @tap="toSearch(item)" v-for="(item,index) in list" :key="index"
							class="flex justify-center align-center mr-3 mb-2" :style="{
							width: '204rpx',
							height: '76rpx',
							background: '#FFFFFF',
							borderRadius: '8rpx 8rpx 8rpx 8rpx',
							border: '2rpx solid #D8D8D8'
						}">
							<text class="font-28 fw4 cl-44">{{item.name}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				sys: {}, //配置
				scrollHeight: 0,
				leftList: [],
				leftSelect: 0, //一级下标
				list: [],
				allcity: []
			}
		},
		onLoad() {
			this.sys = this.getSystemInfoSync()
			this.scrollHeight = this.sys.windowHeight - 10
			this.getData()
		},
		methods: {
			getData() {
				this.$H.get('/index/get_citys', {}, {
					token: false
				}).then(res => {
					console.log('查询所有城市', res)
					this.allcity = res.data
					this.pickerName = res.data[0].child[0].name

					this.leftList = res.data.map((item, index) => {
						return {
							id: item.id,
							name: item.title
						}
					})

					this.list = res.data[0].child.map((item, index) => {
						return {
							id: item.id,
							name: item.name
						}
					})
					console.log(this.rangeList)
				})
			},
			//热门城市
			toSearch(item) {
				uni.navigateTo({
					url: `/pages/search/searchDetail?cityData=${encodeURIComponent(JSON.stringify(item))}`
				})
			},
			//切换一级标题
			changeLeft(index) {
				if (this.leftSelect == index) return
				this.leftSelect = index
				this.list = this.allcity[index].child.map(item => {
					return {
						id: item.id,
						name: item.name
					}
				})
			},
			getSystemInfoSync() {
				const sys = uni.getSystemInfoSync();
				const data = {
					top: sys.statusBarHeight,
					height: sys.statusBarHeight + uni.upx2px(90),
					screenHeight: sys.screenHeight,
					platform: sys.platform,
					model: sys.model,
					windowHeight: sys.windowHeight,
					windowBottom: sys.windowBottom,
					deviceId: sys.deviceId
				};
				return data;
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #fff;
	}

	.content_box {
		display: flex;
		// background-color: #F2F2F2;

		.box_left {
			// border-top: 1px solid rgba(0, 0, 0, 0.1);
			width: 176rpx;
			// background-color: #FAFBFE;
			background: #F3F3F3;

			.scroll_left {
				.left_item {
					padding: 40rpx 0;
					text-align: center;
					font-size: 28rpx;
					font-weight: 400;
					color: #727272;
				}

				.left_active {
					position: relative;
					background-color: #FEFEFE;
					font-size: 16px;
					font-weight: bold;
					color: #262626;

					&::after {
						content: ' ';
						position: absolute;
						left: 0;
						width: 4rpx;
						height: 40rpx;
						background-color: #F9B937;
					}
				}
			}
		}

		.box_right {
			flex: 1;
			// background-color: #fff;
			background: #F8F8F8;
			// border-top: 1px solid rgba(0, 0, 0, 0.1);
			// border-left: 1px solid rgba(0, 0, 0, 0.1);
		}

	}
</style>